<template>
    <div>
      <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
        <el-form-item label="公告标题" prop="title">
          <el-input v-model="form.title" placeholder="请输入公告标题"></el-input>
        </el-form-item>
        <el-form-item label="公告内容" prop="content">
          <el-input type="textarea" v-model="form.content" placeholder="请输入公告内容"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">发布公告</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
  </template>
  
  <script setup>
  import { reactive, ref } from 'vue';
  import api from '@/api/service'
  
  const form = reactive({
    title: '',
    content: ''
  });
  
  const rules = reactive({
    title: [
      { required: true, message: '请输入公告标题', trigger: 'blur' },
    ],
    content: [
      { required: true, message: '请输入公告内容', trigger: 'blur' },
    ],
  });
  
  const formRef = ref(null);
  
  const onSubmit = () => {
    formRef.value.validate((valid) => {
      if (valid) {
        // 这里可以调用后端 API 发布公告
        // 假设我们有一个 postAnnouncement 的方法来处理公告发布
        api.sendNotice(form);
        resetForm();
      } 
    });
  };
  
  const resetForm = () => {
    formRef.value.resetFields();
  };
  

  </script>